import { useEffect, useState,useRef,} from 'react'
import { Breadcrumb } from 'antd';
import { Button } from 'antd';
import '../../static/css/shop/shop.css'
import Content from './content';
import Tost from './tost';
import { menulist } from '../../request/app'

function Shop() {
    const childRef = useRef();
    let [isadd, changeisadd] = useState(false)
    let [isedit, changeedit] = useState(false)
    // 声明数据
    const [data, setdata] = useState([])
    // 页面加载完成获取数据,并传递给两个子组件
    useEffect(() => {
        shoplist()
    }, [])

    function shoplist() {
        menulist({
            istree: 1
        }).then(res => {
            res.list.map(item => {
                item.key = item.id
                if (item.children) {
                    item.children.map(itt => {
                        itt.key = itt.id
                    })
                }
            })
            setdata(res.list)
        })
    }
    // 打开弹框事件
    function add(e,id) {
        // console.log(e,id);
        if (e == 'edit') {
            // console.log('修改');
            changeedit(true)
            childRef.current.lookup(id)
        } else {
            // console.log('添加');
            changeedit(false)
        }
        changeisadd(true)

    }
    // 关闭弹框事件
    function unadd() {
        changeisadd(false)
    }
    return (
        <div>
            <Breadcrumb>
                <Breadcrumb.Item>系统管理</Breadcrumb.Item>
                <Breadcrumb.Item>菜单管理</Breadcrumb.Item>
            </Breadcrumb>
            <Button className='addbutton' type="primary" onClick={add} >添加</Button>
            <Content data={data} add={add} shoplist={shoplist} />
            <Tost ref={childRef}  data={data} isadd={isadd} unadd={unadd} isedit={isedit} shoplist={shoplist} />
        </div>
    )
}
export default Shop